Skip to content

Commit 154fc64

Browse files
author
code-reaper08
committed
front end in developement
1 parent 0b4aa13 commit 154fc64

File tree

3 files changed

+166
-12
lines changed

3 files changed

+166
-12
lines changed

‎index.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,20 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>My app</title>
88
<link rel="stylesheet" href="styles.css">
9+
910
</head>
1011
<body>
12+
<div id="logo">
13+
<a href="#">
14+
<img id="logoimg" src="https://www.flaticon.com/svg/vstatic/svg/3942/3942468.svg?token=exp=1616088423~hmac=b34c0ea0bbfce6ad4744cf0fd41141fe" alt="">
15+
</a>
16+
<a id="home" href="#">
17+
<h3 id="hometext">Broken-URL</h3>
18+
</a>
19+
</div>
20+
21+
22+
1123
<div>
1224
<form id="search-form">
1325
<input type="search"
@@ -16,9 +28,14 @@
1628
required
1729
autocomplete="off"
1830
/>
19-
<button id="search-button">search</button>
31+
<div id="but">
32+
<button id="search-button">Go</button>
33+
</div>
2034
</form>
2135
</div>
36+
<div id="sep">
37+
<h1>Here you go ...</h1>
38+
</div>
2239

2340
<div id="listholder">
2441
<dl id="successlist">

‎input.js‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
1-
const searchInput = document.getElementById('search-input');
2-
const searchButton = document.getElementById('search-button');
1+
// const searchInput = document.getElementById('search-input');
2+
// const searchButton = document.getElementById('search-button');
33

4-
searchButton.addEventListener('click', (e)=>{
5-
e.preventDefault();
6-
const userlink = searchInput.value;
4+
// searchButton.addEventListener('click', (e)=>{
5+
// e.preventDefault();
6+
// const userlink = searchInput.value;
7+
// sessionStorage.setItem("userlink", userlink);
8+
// location.reload();
9+
// location.reload();
10+
11+
// })
12+
13+
14+
15+
$("#search-button").dblclick(function(e) {
16+
console.log("dbl click simulated ");
17+
e.preventDefault();
18+
const userlink = $("#search-input").val();
719
sessionStorage.setItem("userlink", userlink);
820
location.reload();
9-
location.reload();
10-
11-
})
21+
// alert('dblclick');
22+
});
23+
$("#search-button").click(function() {
24+
// alert('click');
25+
$(this).dblclick();
26+
});
27+
28+
// $("#container2").click(function() {
29+
// $("#container").click();
30+
// });

‎styles.css‎

Lines changed: 121 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ dt{
22
color:darkslategray;
33
opacity: 95%;
44
word-wrap: break-word;
5+
font-family:Arial, Helvetica, sans-serif;
56
/* list-style-type: none;
67
margin: 0;
78
margin-block-start: 0;
@@ -17,13 +18,13 @@ body{
1718
}
1819

1920
#sucspan{
20-
color: rgba(172, 255, 47, 0.829);
21+
color: rgb(63, 75, 45);
2122
text-align: center;
2223
font-size: medium;
2324
margin-left: 20px;
2425
border-radius: 15px;
2526
padding: 2px;
26-
background-color: rgba(0, 128, 0, 0.562);
27+
background-color: rgba(0, 128, 0, 0.527);
2728
box-shadow: 5px 2px 8px #ddd;
2829

2930
}
@@ -35,7 +36,7 @@ body{
3536
margin-left: 20px;
3637
border-radius: 15px;
3738
padding: 2px;
38-
background-color: rgba(255, 0, 0, 0.712);
39+
background-color: rgba(201, 0, 0, 0.589);
3940
box-shadow: 5px 2px 8px #ddd;
4041
}
4142

@@ -67,4 +68,121 @@ body{
6768
#fstate{
6869
text-align: center;
6970
margin-bottom: 10px;
71+
}
72+
73+
#search-input{
74+
outline: none;
75+
border: none;
76+
width: 70vw;
77+
height: 5vh;
78+
border-radius: 34px;
79+
border-radius: 28px;
80+
background: #e0e0e0;
81+
box-shadow: inset 22px 12px 24px #c4c4c4,
82+
inset -12px -12px 24px #f0f0f0;
83+
84+
}
85+
::placeholder {
86+
padding-left: 10px;
87+
text-align: center;
88+
color: darkslategray;
89+
opacity: 45%;
90+
}
91+
92+
#input-form{
93+
align-content: center;
94+
}
95+
#search-button{
96+
margin-left: 10px;
97+
border-radius: 50%;
98+
height: 50px;
99+
width: 50px;
100+
text-size-adjust: 2px;
101+
border: none;
102+
outline: none;
103+
background: linear-gradient(145deg, #f0f0f0, #acacac);
104+
box-shadow: 11px 11px 33px #c5c5c5,
105+
-11px -11px 22px #ffffff;
106+
}
107+
#search-button:hover{
108+
background: linear-gradient(145deg, #f0f0f0, #969595);
109+
box-shadow: 11px 11px 33px #c5c5c5,
110+
-11px -11px 22px #ffffff;
111+
}
112+
#search-button:active{
113+
background: linear-gradient(145deg, #f0f0f0, #707070);
114+
box-shadow: inset 11px 11px 33px #c5c5c5,
115+
inset -11px -11px 22px #ffffff;
116+
}
117+
118+
#search-form{
119+
display: flex;
120+
justify-content: center;
121+
align-items: center;
122+
margin-top: 10px;
123+
}
124+
125+
#sep{
126+
margin-top: 20px;
127+
}
128+
#sep h1{
129+
text-align: center;
130+
font-family: monospace;
131+
color: #777777;
132+
opacity: 85%;
133+
}
134+
#logoimg{
135+
margin-left: 15px;
136+
margin-top: 5px;
137+
width: 40px;
138+
height: 40px;
139+
border-radius: 50%;
140+
box-shadow: 5px 5px 20px #8d8f92,
141+
-7px -7px 20px #ffffff;
142+
animation-name: spin;
143+
animation-duration: 5000ms;
144+
animation-iteration-count: infinite;
145+
animation-timing-function: linear;
146+
/* transform: rotate(3deg); */
147+
/* transform: rotate(0.3rad);/ */
148+
/* transform: rotate(3grad); */
149+
/* transform: rotate(.03turn); */
150+
}
151+
152+
@keyframes spin {
153+
from {
154+
transform:rotate(0deg);
155+
}
156+
to {
157+
transform:rotate(360deg);
158+
}
159+
}
160+
#logoimg:active{
161+
width: 40px;
162+
height: 40px;
163+
border-radius: 50%;
164+
box-shadow: inset 5px 5px 20px #8d8f92,
165+
inset -7px -7px 20px #ffffff;
166+
animation-name: spin;
167+
animation-duration: 5000ms;
168+
animation-iteration-count: infinite;
169+
animation-timing-function: linear;
170+
/* transform: rotate(3deg); */
171+
/* transform: rotate(0.3rad);/ */
172+
/* transform: rotate(3grad); */
173+
/* transform: rotate(.03turn); */
174+
}
175+
#home{
176+
text-align: center;
177+
text-decoration: none;
178+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
179+
font-size: xx-large;
180+
font-style: italic;
181+
font-stretch: expanded;
182+
color: #ffffff;
183+
text-shadow: 2px 2px 6px rgb(124, 123, 123);
184+
}
185+
186+
#home:hover{
187+
text-shadow: 2px 2px 6px rgb(110, 109, 109);
70188
}

0 commit comments

Comments
 (0)