Skip to content

Commit 220ae35

Browse files
maqalaqilmaqalaqil
committed
added challenge
1 parent 08ac94d commit 220ae35

22 files changed

+11246
-1
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎README.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
# react-challenge
1+
## Find and Fix Errors
2+
No. of errors in HTML & CSS: 10
3+
A web developer was working on a simple website for Re:Coded bootcamps
4+
5+
This simple web page was designed to look like this before the JS part applied:
6+
And like this after JS part applied:
7+
A gif showing how the buttons and hover effect work:
8+
Here are the images links:
9+
10+
https://drive.google.com/open?id=1_YRh_FeX_owNopgxiz3A2kxWA4YnLHd6
11+
https://drive.google.com/open?id=1SXLpyAeuEagwKCV7MXMbtPAqW3R2hV1m
12+
https://drive.google.com/open?id=1kfaSmgcFlNKhvLnYnGr8ZTW5gPae7GyF
13+
14+
15+
16+
But one day, the son of the developer took a hold of the keyboard, made some random HTML and CSS errors, disabled the buttons functionality and asked some questions.
17+
18+
Your responsibility is:
19+
20+
Check the HTML & CSS code on the left for errors, fix as much as you can to make it appear like the screenshots above,
21+
Answer the questions in the comments
22+
Add the resources you used to answer each question in resources.md file (e.g: add the link you found in Google to your question, or type asked a friend if a friend helped you answering it) so he can look at them himself when he grows up.
23+
Add the JavaScript code to make the buttons work!
24+
If you get stuck on one of the requirements, skip it and do other ones, then come back to it at the end.
25+
If you can't answer a question, try to provide an explanation with why you couldn't determine the answer.
26+
27+
28+
You might need to add more HTML elements and/or CSS rules.
29+
30+
You are required to add as much Javascript code as you can.
31+
32+

‎package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "creap",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^4.2.4",
7+
"@testing-library/react": "^9.3.2",
8+
"@testing-library/user-event": "^7.1.2",
9+
"react": "^16.12.0",
10+
"react-dom": "^16.12.0",
11+
"react-scripts": "3.2.0"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>Re:Coded</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎public/logo192.png

5.22 KB
Loading

‎public/logo512.png

9.44 KB
Loading

‎public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎public/robots.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *

‎resources.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#Add the resources you used to answer the questions below:
2+
ex resource: https://stackoverflow.com/questions/9346954/doctype-html-what-does-it-mean

‎src/App.css

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* List three ways to select html elements in css */
2+
/* Type your answer here */
3+
4+
body {
5+
background-color: #eee;
6+
padding: 0;
7+
margin: 0;
8+
}
9+
10+
header {
11+
background url('https://drive.google.com/uc?id=1ADdMAd8sSM1GxabjRUpJaqliyYQMxixu');
12+
background-size: cover;
13+
background-position: center;
14+
color: #ccc;
15+
display: flex;
16+
/* What does 'display: flex' do?*/
17+
/* Type your answer here */
18+
flex-direction: column;
19+
justify-content: space-around;
20+
align-items: center;
21+
}
22+
23+
.logo {
24+
width: 100px;
25+
margin: 40px;
26+
}
27+
28+
.title {
29+
margin: 40px;
30+
padding: 15px;
31+
border: dotted #ccc 5px;
32+
border-radius: 15px;
33+
}
34+
35+
.italic {
36+
margin: 40px;
37+
font-size: 24px;
38+
/* px, _____, and _____ are 3 measurements units in CSS */
39+
fontstyle: italic;
40+
}
41+
42+
.bootcamp {
43+
padding: 20px;
44+
}
45+
46+
.align-right {
47+
text-align: right;
48+
}
49+
50+
.bootcamp p,
51+
li {
52+
margin: 10px;
53+
}
54+
55+
#awesome {
56+
display: none;
57+
}
58+
59+
footer {
60+
display: flex;
61+
justify-content: space-between;
62+
}
63+
64+
#searchBox {
65+
margin: 0 auto;
66+
display: inline-block;
67+
font-size: 16px;
68+
padding: 5px;
69+
border-radius: 5px;
70+
border-color: #dda65f;
71+
}
72+
73+
#searchBox::selection {
74+
border-color: #3a7ddd;
75+
}
76+
77+
infoBtn,
78+
#searchBtn,
79+
#awesomeBtn {
80+
background-color: #dda65f;
81+
/* add border color to match the background color */
82+
border-color: #dda65f;
83+
color: white;
84+
margin: 0 auto;
85+
display: inline-block;
86+
font-size: 16px;
87+
padding: 5px 15px;
88+
border-radius: 5px;
89+
}
90+
91+
/* Make the mouse curser look like a hand when you hover over the buttons (#infoBtn, #searchBtn, #awesomeBtn) and add backgound and border color of #3a7ddd*/
92+
93+
.socialIcon {
94+
width: 25p;
95+
margin: 0 10px;
96+
}

‎src/App.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import Header from './components/Header';
3+
import Footer from './components/Footer';
4+
import './App.css';
5+
6+
7+
function App() {
8+
return (
9+
<div>
10+
<Header />
11+
<Main />
12+
<Footer />
13+
</div>
14+
);
15+
}
16+
17+
export default App;

‎src/components/Footer.jsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
3+
const Footer = () => {
4+
return (
5+
<footer>
6+
<div>
7+
{/*Add the functionality to open the link in a new tab */}
8+
<a href="https://www.facebook.com/recodedofficial">
9+
<img
10+
src="https://drive.google.com/uc?id=1-yaPy5DZhbYsLxUP8YWjvlpIZdbzDXxl"
11+
alt=""
12+
class="socialIcon"
13+
/>
14+
</a>
15+
<a href="https://www.instagram.com/recodedofficial/">
16+
<img
17+
src="https://drive.google.com/uc?id=18b8F06ADRb6oGVuWosRYnPPOImNt6iCI"
18+
alt=""
19+
class="socialIcon"
20+
/>
21+
</a>
22+
<a href="https://twitter.com/recodedofficial">
23+
<img
24+
src="https://drive.google.com/uc?id=1vVXb5gSBxgwy1idaoPA6rDhc9leviMjx"
25+
alt=""
26+
class="socialIcon"
27+
/>
28+
</a>
29+
<a href="https://www.linkedin.com/company/re-coded/">
30+
<img
31+
src="https://drive.google.com/uc?id=1Rzvd49x5LKeb8yVEGgGfuNBKqN9LXpWE"
32+
alt=""
33+
class="socialIcon"
34+
/>
35+
</a>
36+
</div>
37+
<div>
38+
<span>
39+
(&copy;) 2020. Re:Coded is a 501(&copy;)(3) non-profit corporation.
40+
</span>
41+
</div>
42+
</footer>
43+
);
44+
};
45+
46+
export Footer;

‎src/components/Header.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
const Header = () => {
4+
return (
5+
<header>
6+
{/* What is alt attribute used for? */}
7+
{/* You can write here to answer a question */}
8+
<img
9+
src="https://drive.google.com/uc?id=1ml1cDYnVse0DrPlzkG6tOuQOmDfX0_8z"
10+
alt="Re:Coded logo"
11+
class="logo"
12+
/>
13+
<h1 class="title">Re:Coded</h1>
14+
<p class="italic">
15+
Re:Coded is a non-profit tech organization preparing talented youth in
16+
conflict-affected areas to enter the digital economy as software
17+
developers and tech entrepreneurs
18+
</p>
19+
</header>
20+
<br />
21+
);
22+
};
23+
24+
export default Header;

0 commit comments

Comments
 (0)