Week1 , adding the exercises file js and html, css for project hackyo… by Tarek666666 · Pull Request #426 · HackYourFuture/JavaScript3 · GitHub
Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Week1 , adding the exercises file js and html, css for project hackyo… #426

Open
Tarek666666 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Week1 , adding the exercises file js and html, css for project hackyo… #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions Week1/homework/js-exercises/dog-gallery.js
View file
Open in desktop
37 changes: 37 additions & 0 deletions Week1/homework/js-exercises/dog-gellery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Gallery</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<ul></ul>

<button
type="button"
class="btn btn-primary ml-4 mx-auto d-block m-5"
id="axios"
>
Axios
</button>
<button
type="button"
class="btn btn-danger ml-4 mx-auto d-block m-5"
id="xml"
>
XML
</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="./dog-gallery.js"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions Week1/homework/js-exercises/getRandomUser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container mt-5 row "></div>

<button type="button" class="btn btn-danger ml-4 mb-5" id="xml">
Get a radnom friend : XML
</button>
<button type="button" class="btn btn-primary ml-4 mb-5" id="axios">
Get a radnom friend : Axios
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="./getRandomUser.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions Week1/homework/js-exercises/getRandomUser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
'use strict';

const container = document.querySelector('.container');
const xmlButton = document.getElementById('xml');
const axiosButton = document.getElementById('axios');

const getRandomUserXML = function(method, url) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.open('GET', 'https://www.randomuser.me/api');

xhr.onload = () => {
if (xhr.status == 200) {
let result = JSON.parse(xhr.responseText).results;
console.log(result[0]);
container.innerHTML += ` <div class="card text-white bg-danger mb-3 ml-5 " style="max-width: 18rem;">
<div class="card-header ">A random Friend => <span class='text-danger'>XML</span></div>
<div class="card-body">
<h5 class="card-title" >${result[0].name.title}: ${result[0].name.first} ${result[0].name.last}</h5>
<p class="card-text">Email: ${result[0].email}</p>
<p class="card-text">phone: ${result[0].phone}</p>
</div>
</div> `;
} else {
console.log(
`There is Something went wrong : ${xhr.status} ${xhr.responseText}`,
);
}
};

xhr.onerror = () => {
console.log(`Request Faild : ${xhr.status} : ${xhr.statusText} `);
};
xhr.send();
};

const getRandomUserAxios = function(url) {
axios
.get('https://www.randomuser.me/api')
.then(response => {
console.log(response.data.results);

let result = response.data.results;
container.innerHTML += ` <div class="card text-white bg-primary mb-3 ml-5 " style="max-width: 18rem;">
<div class="card-header ">A random Friend => <span class='text-danger'>Axios</span></div>
<div class="card-body">
<h5 class="card-title" >${result[0].name.title}: ${result[0].name.first} ${result[0].name.last}</h5>
<p class="card-text">Email: ${result[0].email}</p>
<p class="card-text">phone: ${result[0].phone}</p>
</div>
</div> `;
})
.catch(err => {
console.log(`Oooops !! Something went wrong => ${err}`);
});
};

axiosButton.addEventListener('click', getRandomUserAxios);
xmlButton.addEventListener('click', getRandomUserXML);

//getRandomUserAxios('https://www.randomuser.me/api');

//getRandomUserXML('GET', 'https://www.randomuser.me/api');
14 changes: 14 additions & 0 deletions Week1/homework/js-exercises/programmer-humor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programmer Humor</title>
</head>
<body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src='./programmer-humor.js'></script>
</body>
</html>
49 changes: 49 additions & 0 deletions Week1/homework/js-exercises/programmer-humor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* Who knew programmers could be funny?

Write a function that makes a HTTP Request to https://xkcd.now.sh/?comic=latest

Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
Each function should make a HTTP Request to the given endpoint: https://xkcd.now.sh/?comic=latest
Log the received data to the console
Render the img property into an <img> tag in the DOM
Incorporate error handling: log to the console the error message*/

const makeXmlRequest = () => {
let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://xkcd.now.sh/?comic=latest');
xhr.onload = () => {
if (xhr.status === 200) {
let result = JSON.parse(xhr.responseText);
console.log(result);
const createdImg = document.createElement('img');
createdImg.setAttribute('src', result.img);
document.querySelector('body').appendChild(createdImg);
} else {
console.log('Something went wrong', xhr.statusText, xhr.statusText);
}
};
xhr.send();

xhr.onerror = () => {
console.log('Request Faild', xhr.status, xhr.statusText);
};
};

makeXmlRequest();

const makeAxiosRequest = () => {
axios
.get('https://xkcd.now.sh/?comic=latest')
.then(response => {
console.log(response);
let result = response.data;
const createdImg = document.createElement('img');
createdImg.setAttribute('src', result.img);
document.querySelector('body').appendChild(createdImg);
})
.catch(err => {
console.log(err);
});
};
makeAxiosRequest();
109 changes: 109 additions & 0 deletions hackyourrepo-app/index.html
View file
Open in desktop
Loading