Skip to content

Commit e763d59

Browse files
harshita2216harshita2216
authored
Merge branch 'main' into supzi-del
2 parents 9fe9033 + f74d4d2 commit e763d59

File tree

11 files changed

+920
-2
lines changed

11 files changed

+920
-2
lines changed

‎Basic Contact Form/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<h1>Basic Contact Form</h1>
2+
3+
<p>A Basic Contact Form written in HTML, CSS and JAVASCRIPT .</p>
4+
5+
### Use of the Project:
6+
7+
<p>This basic contact form can be added to any website to make it attractive. </p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Result is here!!!
29+
30+
<h3> Screenshot:</h3>
31+
<img src="https://user-images.githubusercontent.com/66966120/125250300-ec32c500-e2aa-11eb-8a50-31d4cf729d72.png" alt="Screenshot (19)" style="max-width:100%;">
32+
33+
34+
<h3> Demo </h3>
35+
36+
<a href="https://sonamgupta136.github.io/Basic-Contact-Form.io/">Demo</a>
37+
38+
<br>
39+

‎Basic Contact Form/app.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
let sendButton = document.getElementById('send');
2+
let resetButton = document.getElementById('reset');
3+
let form = document.getElementById('form');
4+
5+
6+
form.addEventListener('submit', function (e) {
7+
e.preventDefault();
8+
})
9+
10+
resetButton.addEventListener('click', function () {
11+
let name = document.getElementById('name');
12+
let email = document.getElementById('email');
13+
let message = document.getElementById('message');
14+
15+
name.value = '';
16+
email.value = '';
17+
message.value = '';
18+
})
19+
20+
sendButton.addEventListener('click', function (e) {
21+
let name = document.getElementById('name');
22+
let email = document.getElementById('email');
23+
let message = document.getElementById('message');
24+
25+
name = name.value;
26+
localStorage.setItem('name', name);
27+
28+
email = email.value;
29+
localStorage.setItem('email', email);
30+
31+
message = message.value;
32+
localStorage.setItem('message', message);
33+
34+
})
35+

‎Basic Contact Form/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Contact Form</title>
10+
</head>
11+
12+
<body>
13+
<form id="form">
14+
<h1>Please Contact me</h1>
15+
<div>
16+
<label for="name">Name</label></br>
17+
<input id="name" name="name">
18+
</div>
19+
<div>
20+
<label for="email">Email</label><br>
21+
<input type="email" id="email" name="email">
22+
</div>
23+
<div>
24+
<label for="message">Message</label><br>
25+
<textarea id="message" name="message"></textarea>
26+
</div>
27+
<div id="buttons-row">
28+
<div class="buttons">
29+
<button type="submit" id="send">Send</button>
30+
</div>
31+
<div class="buttons">
32+
<button id="reset">Reset</button>
33+
</div>
34+
</div>
35+
</form>
36+
<script src="app.js"></script>
37+
</body>
38+
39+
</html>
40+

‎Basic Contact Form/style.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
form {
2+
background-color: black;
3+
width: 500px;
4+
border-radius: 25px;
5+
height: 400px;
6+
padding: 25px;
7+
font-family: Arial, Helvetica, sans-serif;
8+
box-sizing: border-box;
9+
margin: 50px auto 50px;
10+
11+
}
12+
13+
form h1 {
14+
color: white;
15+
text-align: center;
16+
font-size: 22px;
17+
}
18+
19+
label {
20+
color: rgb(43, 134, 209);
21+
font-weight: bold;
22+
padding-bottom: 5px;
23+
padding-top: 15px;
24+
display: inline-block;
25+
}
26+
27+
input,
28+
textarea {
29+
box-sizing: border-box;
30+
width: 450px;
31+
height: 30px;
32+
padding-left: 5px;
33+
font-family: Arial, Helvetica, sans-serif;
34+
}
35+
36+
textarea {
37+
height: 50px;
38+
}
39+
40+
#buttons-row {
41+
display: flex;
42+
justify-content: space-evenly;
43+
}
44+
45+
button {
46+
flex-grow: 1;
47+
width: 125px;
48+
margin: 25px;
49+
border: none;
50+
border-radius: 15px;
51+
height: 35px;
52+
font-size: 20px;
53+
}
54+
55+
button#send {
56+
background-color: rgb(211, 59, 59);
57+
color: white;
58+
}
59+
60+
button#reset {
61+
background-color: rgb(253, 253, 54);
62+
color: black;
63+
}
64+

‎Index.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,7 @@
5959
| [ConnectFour](https://github.com/Shauryaditya/Web-dev-mini-projects/tree/main/ConnectFour) | This is a simple game which can be played between two players.The player who connects the four bubbles first wins the game . The bubbles could be connected horizontally , vertically or diagonally.The players have to be together since multiplayer feature is not available .|
6060
| [Expand Button](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Expand-Button) |It is a basic website with an expanding button on it. As we click on the button it expands and shrinks after 5 seconds. |
6161
| [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|
62-
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time . |
63-
| [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form) | A basic contact form having send and reset button. |
62+
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time .|
6463
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |
6564
| [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone) | A project which aims to clone YouTube UI with responsiveness by using HTML & CSS. |
6665
| [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application) | Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them. |
@@ -72,4 +71,6 @@
7271
| [Blackjack Game](https://github.com/TheArushiSingh/Web-dev-mini-projects/tree/main/Blackjack%20Game) | The player has to get a hand with a value as close to 21 as possible without going over. A hand that goes over 21 is a bust. Each player has to beat the dealer's hand in order to win. |
7372
| [Tribute Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/TRIBUTE%20PAGE) | This is a tribute web page for covid warriors. Have built it using HTML, CSS, JAVASCRIPT. |
7473
| [BMI Calculator (Flask)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/BMI%20Calculator%20(Flask))|This is a simple BMI calculator built using HTML, CSS, Python and Flask framework.|
74+
| [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form) | A basic contact form having reset and send button. |
75+
| [Online quiz portal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/online%20quiz%20portal) | An online portal in which an individual can attend the quiz and view the result automatically |
7576
| [Virtual Keyboard](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Virtual%20Keyboard) | This is a keyboard on the screen with all the components and a display. |

‎online quiz portal/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Online quiz portal
2+
3+
## Description
4+
It is an online portal in which one can attend the quiz online and view the results immeadiately after completing the quiz
5+
6+
## Use of this Project
7+
Using this portal one can attend the quiz virtually and view the scores in real time
8+
9+
## Stacks Used
10+
* JavaScript
11+
* HTML
12+
* CSS
13+
14+
## How to set up project
15+
Download the zip file and copy all the files in the single folder. Open the folder in visual studio code and copy the path of the index file and paste it in the search box of google chrome to view the output.
16+
17+
## ScreenShot
18+
19+
<img src="https://github.com/jyothi-k-g/online-quiz-poral/blob/main/images/s1.png" />
20+

‎online quiz portal/index.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Online quiz portal</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
9+
</head>
10+
<body>
11+
<!-- start Quiz button -->
12+
<div class="start_btn"><button>Start Quiz</button></div>
13+
14+
<!-- Info Box -->
15+
<div class="info_box">
16+
<div class="info-title"><span>Rules for the quiz
17+
18+
</span></div>
19+
<div class="info-list">
20+
<div class="info">1. Once you select your answer, it can't be undone.</div>
21+
<div class="info">2. You will have only 15 seconds per each question.</div>
22+
<div class="info">3. You'll get points on the basis of your correct answers.</div>
23+
</div>
24+
<div class="buttons">
25+
<button class="quit">Exit Quiz</button>
26+
<button class="restart">Continue</button>
27+
</div>
28+
</div>
29+
30+
<!-- Quiz Box -->
31+
<div class="quiz_box">
32+
<header>
33+
<div class="title">Online quiz portal</div>
34+
<div class="timer">
35+
<div class="time_left_txt">Time Left</div>
36+
<div class="timer_sec">15</div>
37+
</div>
38+
<div class="time_line"></div>
39+
</header>
40+
<section>
41+
<div class="que_text">
42+
</div>
43+
<div class="option_list">
44+
</div>
45+
</section>
46+
47+
<footer>
48+
<div class="total_que">
49+
<!-- Here I've inserted Question Count Number from JavaScript -->
50+
</div>
51+
<button class="next_btn">Next Question</button>
52+
</footer>
53+
</div>
54+
55+
<!-- Result Box -->
56+
<div class="result_box">
57+
<div class="icon">
58+
<i class="fas fa-crown"></i>
59+
</div>
60+
<div class="complete_text">You've completed the Quiz!</div>
61+
<div class="score_text">
62+
<!-- Here I've inserted Score Result from JavaScript -->
63+
</div>
64+
<div class="buttons">
65+
<button class="restart">Replay Quiz</button>
66+
<button class="quit">Quit Quiz</button>
67+
</div>
68+
</div>
69+
70+
71+
<script src="question.js"></script>
72+
73+
<script src="script.js"></script>
74+
75+
</body>
76+
</html>

‎online quiz portal/question.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
let questions = [
2+
{
3+
numb: 1,
4+
question: "Regression testing is primarily related to",
5+
answer: "Functional testing",
6+
options: [
7+
"Maintenance testing",
8+
"Data flow testing",
9+
"Functional testing",
10+
"Development testing"
11+
]
12+
},
13+
{
14+
numb: 2,
15+
question: "What is the defect rate for Six sigma",
16+
answer: "3.4 defects per million lines of code",
17+
options: [
18+
"3.0 defects per million lines of code",
19+
"3.4 defects per million lines of code",
20+
"1.4 defects per million lines of code",
21+
"1.0 defect per million lines of code"
22+
]
23+
},
24+
{
25+
numb: 3,
26+
question: "Of the following sort algorithms, which has execution time that is least dependent on initial ordering of the input ?",
27+
answer: "Merge sort",
28+
options: [
29+
"Selection sort",
30+
"Insertion sort",
31+
"Quick sort",
32+
"Merge sort"
33+
]
34+
},
35+
{
36+
numb: 4,
37+
question: "The domain of the function log( log sin(x) ) is",
38+
answer: "Empty set",
39+
options: [
40+
"0 < x < π",
41+
"Empty set",
42+
"0 < x < π",
43+
"2nπ < x < (2n + 1) π , for n in N "
44+
]
45+
},
46+
47+
];
48+

‎online quiz portal/screenshot/s1.png

45.2 KB
Loading

0 commit comments

Comments
 (0)