22
33< head >
44 < meta charset ="utf-8 " />
5+ < link href ="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap " rel ="stylesheet ">
56 < style >
67 body {
78 font-family : Verdana, Geneva, Tahoma, sans-serif;
89 background-image : linear-gradient (rgb (119 , 168 , 232 ), rgb (213 , 226 , 252 ), rgb (113 , 143 , 182 ));
910 height : 100vh ;
1011 color : rgb (16 , 11 , 0 );
1112 display : flex;
13+ flex-direction : column;
14+ justify-content : center;
15+ }
16+ h1 {
17+ text-align : center;
18+ font-family : "Permanent Marker" , cursive;
19+ font-size : 2.9rem ;
20+ background-image : url (./ wor ld.jpg);
21+ background-clip : text;
22+ background-size : contain;
23+ color : transparent;
24+ margin-bottom : 0 ;
1225 }
1326
1427 button {
4053 }
4154
4255 form {
43- margin : auto;
56+ margin : 40 px auto;
4457 max-width : 80% ;
4558 text-align : center;
4659 }
60+
61+ # error-box {
62+ border-color : red;
63+ border-width : .2px ;
64+ border-style : solid;
65+ color : red;
66+ margin : 0 auto;
67+ font-size : small;
68+ padding : 0 10px ;
69+ visibility : hidden;
70+ }
71+
4772 </ style >
4873 < script >
4974 // TODO: create a handler
5075 function setSearchEngine ( ) {
5176
5277 const engineSelected = document . querySelector ( 'input[name=engine]:checked' ) ;
78+ const query = document . getElementById ( 'q' ) ;
5379 let selectedOption = engineSelected . value ;
5480
5581 const actionURL = {
5985 ask : 'https://www.ask.com/web' ,
6086 } ;
6187
88+ //Bonus mission part 1
89+
90+ //option 1: use a window alert
91+ // if (query.value.trim() === "") {
92+ // alert("Oops! You didn't enter anything to search for.")
93+ // event.preventDefault(); //Stop form from submitting
94+ // } else if (!selectedOption) {
95+ // alert("Oops! Which search engine do you want to use?")
96+ // event.preventDefault();
97+ // }
98+
99+ //option 2: use an error box on page with text
100+ //First need to create to boxes in the html. Thay have to exist first.
101+ const errorBox = document . getElementById ( "error-box" ) ;
102+ const errorMsg = document . getElementById ( "error-msg" ) ;
103+ if ( query . value . trim ( ) === "" ) {
104+ errorBox . style . visibility = "visible"
105+ errorMsg . innerHTML = "Oops! You didn't enter anything to search for." ;
106+ event . preventDefault ( ) ; //Stop form from submitting
107+ } else if ( ! selectedOption ) {
108+ errorBox . style . visibility = "visible"
109+ errorMsg . innerHTML = "Oops! Which search engine do you want to use?" ;
110+ event . preventDefault ( ) ;
111+ }
112+
113+
62114 const form = document . getElementById ( "searchForm" ) ;
63115 let url = actionURL [ selectedOption ] ;
64116 form . action = url ;
73125</ head >
74126
75127< body >
128+ < h1 > Searching the world...</ h1 >
76129 < form id ="searchForm " method ="GET " target ="_blank ">
77130 <!-- TODO: add form elements -->
78131 < label for ="search "> 🔎</ label >
79- < input id ="search " type ="text " name ="q " placeholder ="search for... " />
132+ < input id ="q " type ="text " name ="q " placeholder ="search for... " />
80133 < label > < input type ="radio " name ="engine " value ="google "> Google</ label >
81134 < label > < input type ="radio " name ="engine " value ="duckDuckGo "> DuckDuckGo</ label >
82135 < label > < input type ="radio " name ="engine " value ="bing "> Bing</ label >
83136 < label > < input type ="radio " name ="engine " value ="ask "> Ask</ label >
84137 < button type ="submit " id ="submit " value ="Go! "> Go!</ button >
85138 </ form >
139+
140+ <!--Bonus mission part 1 option 2 -->
141+ < div id ="error-box ">
142+ < p id ="error-msg "> </ p >
143+ </ div >
144+
86145</ body >
0 commit comments