Thanks to visit codestin.com
Credit goes to github.com

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
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/* Let's make a randomized dog photo gallery!

Write a function that makes a HTTP Request to https://dog.ceo/api/breeds/image/random. It should trigger after clicking a button in your webpage.
Every time the button is clicked it should append a new dog image to the DOM.

Create an index.html file that will display your random image
Add 2 <button> and 1 <ul> element, either in the HTML or through JavaScript
Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios
When any one of the 2 buttons is clicked it should make a HTTP Request to https://dog.ceo/api/breeds/image/random
After receiving the data, append to the <ul> a <li> that contains an <img> element with the dog image
Incorporate error handling: log to the console the error message*/

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

const getRandomDogXml = () => {
const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://dog.ceo/api/breeds/image/random');

xhr.onload = () => {
if (xhr.status === 200) {
let result = JSON.parse(xhr.responseText);
const photosList = document.querySelector('ul');
const createdListItem = document.createElement('li');
const createdImage = document.createElement('img');

createdImage.setAttribute('src', result.message);
createdImage.setAttribute('class', 'rounded mx-auto d-block mt-4');
createdImage.style.width = '400px';
createdImage.style.height = '400px';
createdImage.style.border = '3px solid red';
createdListItem.appendChild(createdImage);
photosList.style.listStyle = 'none';
photosList.appendChild(createdListItem);
} else
throw new Error(`Somthing went wrong ${xhr.status} : ${xhr.statusText}`);
};

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

xhr.send();
};

const getRandomDogAxios = () => {
axios
.get('https://dog.ceo/api/breeds/image/random')
.then(response => {
let result = response.data.message;
const photosList = document.querySelector('ul');
const createdListItem = document.createElement('li');
const createdImage = document.createElement('img');

createdImage.setAttribute('src', result);
createdImage.setAttribute('class', 'rounded mx-auto d-block mt-4');
createdImage.style.width = '400px';
createdImage.style.height = '400px';
createdImage.style.border = '3px solid blue';
createdListItem.appendChild(createdImage);
photosList.style.listStyle = 'none';
photosList.appendChild(createdListItem);
})
.catch(err => {
console.log(err);
});
};

xmlButton.addEventListener('click', getRandomDogXml);
axiosButton.addEventListener('click', getRandomDogAxios);
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
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,117 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
</head>
<body>
<header class="main-header">
<nav class="main-nav">
<h4>HYF Repositories</h4>
<select name="repo-selection" id="select">
<option value="">repo1</option>
<option value="">repo2</option>
<option value="">repo3</option>
</select>
</nav>
</header>
<div class="main-container">
<section class="output-repos">
<div class="repo-result shadow p-3 mb-1 bg-white rounded">
<table>
<table>
<tr>
<td><span>Repository:</span></td>
<td>SampleRepo1</td>
</tr>
<tr>
<td><span>Description:</span></td>
<td>This repository is meant to be a sample</td>
</tr>
<tr>
<td><span>Fork:</span></td>
<td>5</td>
</tr>
<tr>
<td><span>Updated:</span></td>
<td>2020-05-27 12:00:00</td>
</tr>
</table>
</table>
</div>
<div class="repo-result shadow p-3 mb-1 bg-white rounded">
<table>
<tr>
<td><span>Repository:</span></td>
<td>AndAnotherOne</td>
</tr>
<tr>
<td><span>Description:</span></td>
<td>Another sample repo! Can you believe it?</td>
</tr>
<tr>
<td><span>Fork:</span></td>
<td>9</td>
</tr>
<tr>
<td><span>Updated:</span></td>
<td>2020-05-27 12:00:00</td>
</tr>
</table>
</div>
<div class="repo-result shadow p-3 mb-1 bg-white rounded">
<table>
<tr>
<td><span>Repository:</span></td>
<td>HYF-Is-The-Best</td>
</tr>
<tr>
<td><span>Description:</span></td>
<td>
This repository contains all things HackYourFuture. That's
because HYF is amazing!!!!
</td>
</tr>
<tr>
<td><span>Fork:</span></td>
<td>5142</td>
</tr>
<tr>
<td><span>Updated:</span></td>
<td>2020-05-27 12:00:00</td>
</tr>
</table>
</div>
</section>

<section class="output-contributors">
<div class="contributors-result">
<ul>
<li class="shadow-sm p-3 mb-1 bg-light rounded">
Contributors
</li>
<li class="repo-result shadow p-3 mb-1 bg-white rounded">
<img src="./hyf.png" />
<a class="ml-3 text-primary">Tarek</a>
<span class="badge badge-secondary float-right">45</span>
</li>
<li class="repo-result shadow p-3 mb-1 bg-white rounded">
<img src="./hyf.png" />
<a class="ml-3 text-primary">Tarek</a>
<span class="badge badge-secondary float-right">45</span>
</li>
</ul>
</div>
</section>
</div>
<script src="./script.js"></script>
</body>
</html>
Loading