Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Js3 w3 mahmoud #396

Closed
mahmoudbd wants to merge 8 commits into from
Closed

Js3 w3 mahmoud #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ca490e1
js3-w1-homework
mahmoudbd Jan 26, 2020
4cfd068
project is done
mahmoudbd Jan 29, 2020
bf39a29
modified homework
mahmoudbd Feb 1, 2020
08bfefb
modified humor
mahmoudbd Feb 1, 2020
e96961b
w2
mahmoudbd Feb 2, 2020
a634c38
pro modified
mahmoudbd Feb 4, 2020
ef25bfc
Homework-classes
mahmoudbd Feb 10, 2020
ae6a73e
project-w3
mahmoudbd Feb 10, 2020
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
68 changes: 51 additions & 17 deletions homework-classes/ContributorsView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,62 @@
'use strict';

{
const { createAndAppend } = window.Util;
const { createAndAppend } = window.Util;

class ContributorsView {
constructor(container) {
this.container = container;
}
class ContributorsView {
constructor(container) {
this.container = container;
}

update(state) {
if (!state.error) {
this.render(state.contributors);
}
}
update(state) {
if (!state.error) {
this.render(state.contributors);
}
}

/**
/**
* Renders the list of contributors
* @param {Object[]} contributors An array of contributor objects
*/
render(contributors) {
// TODO: replace this comment and the console.log with your own code
console.log('ContributorsView', contributors);
}
}
render(contributors) {
// TODO: replace this comment and the console.log with your own code
this.container.innerHTML = '';
contributors.forEach((ele) => {
const mainDiv = document.querySelector('.contributors-container');
console.log(mainDiv);

window.ContributorsView = ContributorsView;
const contributorsDiv = createAndAppend('div', mainDiv, {
class: 'contributorsDiv'
});

const contArray = [ ele.avatar_url, ele.login, ele.contributions ];

const div = createAndAppend('div', contributorsDiv, {
class: 'ImgDiv'
});
const img = createAndAppend('img', div);

img.src = contArray[0];

const loginDiv = createAndAppend('div', contributorsDiv, {
class: 'login'
});

createAndAppend('a', loginDiv, {
text: contArray[1],
href: ele.html_url,
target: '_blank'
});

const buttonDiv = createAndAppend('div', contributorsDiv, {
class: 'buttonDiv'
});
createAndAppend('button', buttonDiv, { text: contArray[2] });
});

console.log('ContributorsView', contributors);
}
}

window.ContributorsView = ContributorsView;
}
57 changes: 40 additions & 17 deletions homework-classes/RepoView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,51 @@
'use strict';

{
const { createAndAppend } = window.Util;
const { createAndAppend } = window.Util;

class RepoView {
constructor(container) {
this.container = container;
}
class RepoView {
constructor(container) {
this.container = container;
}

update(state) {
if (!state.error) {
this.render(state.selectedRepo);
}
}
update(state) {
if (!state.error) {
this.render(state.selectedRepo);
}
}

/**
/**
* Renders the repository details.
* @param {Object} repo A repository object.
*/
render(repo) {
// TODO: replace this comment and the console.log with your own code
console.log('RepoView', repo);
}
}
render(repo) {
// TODO: replace this comment and the console.log with your own code
this.container.innerHTML = '';

window.RepoView = RepoView;
const table = createAndAppend('table', this.container);

table.innerHTML += `
<tr>
<td> <strong> Repository: </td> </strong>
<td><a href='${repo.html_url}' target='_blank'>${repo.name}</a></td>
</tr>
<tr>
<td> <strong>Description: </td> </strong>
<td>${repo.description}</td>
</tr>
<tr>
<td> <strong> Forks:</td> <strong>
<td>${repo.forks}</td>
</tr>
<tr>
<td> <strong> Updated:</td> <strong>
<td>${repo.updated_at}</td>
</tr>
`;

console.log('RepoView', repo);
}
}

window.RepoView = RepoView;
}
109 changes: 108 additions & 1 deletion homework-classes/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,110 @@
@import url('https://fonts.googleapis.com/css?family=Gelasio&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gelasio', serif;
}
.alert-error {
color: red;
color: red;
width: 100%;
height: 100px;
padding: 30px;
text-align: center;
font-weight: 800;
font-size: 25px;
background-color: whitesmoke;
}

#root {
width: 80%;
margin: auto;
font-size: 18px;
}

.header {
background-color: #3f51b5;
padding: 25px;
text-align: left;
color: white;
font-size: 30px;
}
.repo-container {
width: 50%;
padding: 30px;
box-shadow: inset 0 0 0 5px #ccc;
max-height: 220px;
}

select {
font-size: 20px;
}

.main-container {
display: flex;
justify-content: space-around;
background-color: whitesmoke;
}
.contributors-container {
padding: 30px;
width: 50%;
margin-left: 10px;
box-shadow: inset 0 0 0 5px #ccc;
}

.contributorsDiv {
display: flex;
justify-content: space-between;
border-bottom: gray 2px solid;
padding: 10px;
}
.ImgDiv {
padding: 5px;
}
button {
padding: 8px;
border: gray;
background-color: gray;
color: white;
}
.login {
padding-top: 40px;
font-size: px;
}

.buttonDiv {
padding: 30px;
}

img {
width: 100px;
}
td {
padding: 2px;
}

@media screen and (max-width: 900px) {
#root {
width: 98%;
font-size: 15px;
}
.main-container {
flex-direction: column;
}
.repo-container {
width: 100%;
margin-right: 0px;
margin-bottom: 10px;
padding: 20px;
max-height: 300px;
}
.header {
font-size: 20px;
}

.contributors-container {
width: 100%;
margin-left: 0px;
padding: 20px;
}
}
Binary file added homework/Adyan-Session/Adyen-Session.pdf
View file
Open in desktop
Binary file not shown.
91 changes: 91 additions & 0 deletions homework/DogPhoto/DogPhotoGallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!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>Dog-photo-gallery</title>
<style>
body{
text-align: center;
background-color: whitesmoke;
}
ul{
list-style: none;
}
img {
width: 250px;
height: 250px;
}
#axiosBtn, #xhrBtn{
padding: 10px;
margin: 10px;
font-weight: 600;
}
</style>
</head>
<body>
<dvi>
<button id="axiosBtn">Get by Axios</button>
<button id="xhrBtn">Get by XHR</button>
<div id="main">
</div>

</dvi>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let mainDiv = document.getElementById('main')
let getByAxios= document.getElementById('axiosBtn');
let getByXHR = document.getElementById('xhrBtn');
getByAxios.addEventListener('click', fetchByAxios);
getByXHR.addEventListener('click', fetchByXHR);

// Response by axios
function fetchByAxios() {
axios
.get('https://dog.ceo/api/breeds/image/random')
.then((res) => {
let ul = document.createElement("ul");
let li = document.createElement("li")
let img = document.createElement('img');
img.src = res.data.message;
let h2 = document.createElement('h2');
h2.innerText = 'Show by Axios';
li.appendChild(img);
ul.appendChild(li);
mainDiv.appendChild(h2);
mainDiv.appendChild(ul);
})
.catch((err) => console.error(err));
}

// Response By XHR
function fetchByXHR() {
let getByXhr = new XMLHttpRequest();
getByXhr.responseType = 'json';
getByXhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status ===200) {
let ul = document.createElement("ul");
let li = document.createElement("li")
let img = document.createElement('img');
img.src = getByXhr.response.message;
let h2 = document.createElement('h2');
h2.innerText = 'Show by XHR';
li.appendChild(img);
ul.appendChild(li);
mainDiv.appendChild(h2);
mainDiv.appendChild(ul);
}
else if (this.status >= 400 && this.status < 500){
console.error("There is an error");
}
};
getByXhr.open('GET', 'https://dog.ceo/api/breeds/image/random', true);
getByXhr.send();
}

</script>

</body>
</html>
Loading