Harjutus 6 Lõpptulemuseks peaksid saama andmeid peekoni kohta Maksim T / Aleksandr B /Timur:
Põhilised sammud:
API-le saadetakse taotlus. Vastus teisendatakse loeteluks. Tulemus kuvatakse lehel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Bacon API</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin-top: 50px;
}
button {
background-color: #a455ff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #a455ff;
}
p {
margin-top: 20px;
font-size: 18px;
text-align: left;
}
</style>
</head>
<body>
<button type="button" onclick="loadDoc()">Request bacon</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest(); // Loome uue XMLHttpRequest objekti
xhttp.onload = function () {
// Funktsioon, mis käivitatakse, kui päring on lõppenud
const response = JSON.parse(this.responseText); // Tõlgime vastuse JSON-iks
const listContainer = document.getElementById("demo"); // Leiame elemendi, kuhu sisu lisada
const ul = document.createElement("ul"); // Loome uue <ul> elemendi
response.forEach(function (item) {
// Lisame vastuse elemendid loeteluna
const li = document.createElement("li");
li.textContent = item; // Määrame <li> tekstiks vastuse sisu
ul.appendChild(li); // Lisame <li> loetelusse
});
listContainer.innerHTML = ""; // Tühjendame vana sisu
listContainer.appendChild(ul); // Lisame <ul> elemendi
};
xhttp.open("GET", "https://baconipsum.com/api/?type=all-meat"); // Avame GET päringu
xhttp.send(); // Saadame päringu
}
</script>
</body>
</html>
Request bacon
Harjutus 7 Github andmete kasutamine API kaudu Luca / Artur / Veronika
Funktsioon saadab päringu, et laadida XML-fail.
Kui päring õnnestub, loetakse XML-failist mängude andmed.
Mängude nimed, hinnad ja platvormid lisatakse tabelisse.
Tabel kuvatakse lehel.
import "./styles.css"; // Impordi stiilid välisest failist
// Muutujad profiiliandmete salvestamiseks
let profileName = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";
let profilePicture = "";
// Asünkroonne funktsioon GitHubi profiiliandmete pärimiseks
async function fetchProfile(username) {
try {
// Tee päring GitHubi API-le profiiliandmete saamiseks
const response = await fetch(`https://api.github.com/users/${username}`);
// Muudame vastus JSON formaati
const data = await response.json();
// Uuendame muutujaid saadud andmetega
profileName = data.login;
profileId = data.id;
profileLink = data.html_url;
profileRepos = data.public_repos;
profilePicture = data.avatar_url;
// Kuvame uuendatud andmed lehel
renderPage();
} catch (error) {
// Käsitle päringu vigu
console.error("Viga profiili pärimisel:", error);
}
}
// Funktsioon lehe sisu kuvamiseks
function renderPage() {
// Uuenda elemendi sisu, mille id on "app"
document.getElementById("app").innerHTML = `
<div>
<h1>Github profiili vaatamine</h1>
<p>Palun sisesta profiilinimi: </p>
<input id="username-input" /> <!-- Sisendväli kasutajanime sisestamiseks -->
<div class="content">
<h1 id="name">Nimi: ${profileName}</h1>
<p id="id">Id: ${profileId}</p>
<p id="reports">Avalikud repod: ${profileRepos}</p>
<p id="profile-url">
Link: <a href="${profileLink}" target="_blank">/users/${profileName}</a>
<!-- Link kasutaja profiilile -->
</p>
<div id="profile-avatar">
<img src="${profilePicture}" alt="${profileName} profiilifoto laadimine...."
style="width: 100px; height: 100px; border-radius: 60%;" />
<!-- Kasutaja avatar -->
</div>
</div>
</div>
`;
// Lisame sündmuste töötleja sisendväljale
document
.getElementById("username-input")
.addEventListener("keyup", function (event) {
// Kontrolli, kas vajutati Enteri klahvi
if (event.key === "Enter") {
// Hangi kasutaja nimi sisendväljalt
const username = event.target.value;
// Kutsu välja profiili pärimise funktsioon
fetchProfile(username);
}
});
}
// Esmane lehe kuvamine
renderPage();body {
background: linear-gradient(135deg, #000, #1a1a1a), url("clonnex.gif");
background-size: cover;
background-blend-mode: overlay;
color: #e0e0e0;
font-family: "Roboto", sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #ff3399;
font-size: 36px;
font-weight: 700;
text-shadow: 2px 2px 5px rgba(255, 51, 102, 0.6);
margin-bottom: 15px;
letter-spacing: 1.5px;
}
p {
font-size: 20px;
line-height: 1.8;
margin: 0;
}
#json {
background: rgba(28, 28, 28, 0.9);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 6px 12px rgba(255, 0, 102, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#json:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(255, 0, 102, 0.6);
}
#json:last-child {
margin-bottom: 0;
}Harjutus 8 Xml Sündmuspõhine API peab pakkuma oma tarbijatele järgmist:
- tellijatele sündmuste edastamine asünkroonselt
- mehhanism, mis võimaldab tarbijatel tellida neile huvipakkuvaid sündmusi
Arkadi / Aleksandr R / Maksim M
Funktsioon saadab päringu GitHub API-le, et saada kasutaja andmed.
Kui päring õnnestub, loetakse kasutaja profiili andmed (nimi, ID, repod, avatar).
Profiili andmed (nimi, repod, profiilipilt) kuvatakse lehel.
Kasutaja saab sisestada GitHubi kasutajanime, vajutada Enter ja näha selle kasutaja andmeid.
<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
<game>
<title lang="en">Hearthstone</title>
<price>Free</price>
<platforms>
<platform>PC</platform>
</platforms>
</game>
<game>
<title lang="en">Minecraft</title>
<price>10.99</price>
<platforms>
<platform>xbox</platform>
</platforms>
</game>
<game>
<title lang="en">Dota 2</title>
<price>life</price>
<platforms>
<platform>PC</platform>
</platforms>
</game>
</gamelist>// Funktsioon XML-i laadimiseks ja töötlemiseks
function loadXMLDoc() {
let xmlhttp = new XMLHttpRequest(); // Loome XMLHttpRequest objekti
xmlhttp.onreadystatechange = function () { // Määrame, mis juhtub, kui päringu olek muutub
if (this.readyState === 4 && this.status === 200) { // Kui päringu olek on '4' (täidetud) ja staatusekood on '200' (edukas)
getGameDetails(this); // Kutsume funktsiooni mängude detailide saamiseks
}
};
xmlhttp.open("GET", "src/games.xml", true); // Avame päringu, et saada XML-fail
xmlhttp.send(); // Saadame päringu
}
// Funktsioon mängude detailide töötlemiseks ja tabelisse lisamiseks
function getGameDetails(xml) {
const xmlDoc = xml.responseXML; // Saame XML-i vastuse
let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>"; // Loome tabelipealkirjad
let gameElements = xmlDoc.getElementsByTagName("game"); // Otsime kõik 'game' elemendid
for (let i = 0; i < gameElements.length; i++) { // Läbime kõik 'game' elemendid
tableRows +=
"<tr><td>" +
gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td><td>" +
gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
"</td><td>";
let platforms = gameElements[i].getElementsByTagName("platform"); // Otsime mängu platvormid
for (let j = 0; j < platforms.length; j++) { // Läbime kõik platvormid
tableRows += platforms[j].childNodes[0].nodeValue + "/"; // Lisame platvormi nime tabelisse
}
tableRows += "</td></tr>"; // Lisame tabeli rea lõppu
}
document.getElementById("xmlTable").innerHTML = tableRows; // Asetame loodud tabeli HTMLi
}
// Loome tabeli elemendi, kuhu andmed hiljem kuvatakse
document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;
// Kutsume üles XML-faili laadimise funktsiooni
loadXMLDoc();
Harjutus 10 Saada email Github push-imisel Matvei / Yaroslav / Darja:
Kasutaja initsialiseerib uue Git-repositooriumi ja lisab failid jälgimiseks.
Create commit: Pärast muudatuste lisamist indeksisse luuakse commit koos kirjeldusega.
Kasutaja saadab kohalikud muudatused GitHubi kaugrepositooriumi, kasutades käsku git push.
Pärast muudatuste edukat tõukamist saadab GitHub push-teate peamise repositooriumi harule ja posti.
Harjutus 11 Anton / Deniss / Martin K: Minu menüüs on
Harjutus 12 kasutada bcrypt raamatukogu juhusliku stringi genereerimiseks, et tugevdada paroolide turvalisust.
Parool ‘deniss’ kombineeritakse seejärel soolaga ja räsitakse, et saada salasõna krüpteeritud versioon.
Kood mõõdab aega, mis kulus soola genereerimiseks ja salasõna häkkimiseks, ning väljastab tulemused konsooli.
const bcrypt = require('bcrypt');
const myPassword = 'deniss';
console.time( 'Time to generate salt');
const salt = bcrypt.genSaltSync(10);
console.log('This is your salt: ' + salt);
console.timeEnd( 'Time to generate salt');
console.time( 'Time to generate hash');
const hashedPassword = bcrypt.hashSync(myPassword, salt);
console.log(myPassword + ' is your password & this is your password after hashing it: ' + hashedPassword);
console.timeEnd( 'Time to generate hash');