API tools faq
paste
Guest User

Untitled

a guest
Jan 20th, 2018
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta name="description" content="Shopify application challenge">
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width">
  8. <title>Shopify's challenge</title>
  9.  
  10. <link href="css.css" rel="stylesheet">
  11. <script src="js.js"></script>
  12. <style id="jsbin-css">
  13. * {
  14. background-color: #000639;
  15. font-family: Helvetica, Arial, sans-serif;
  16. }
  17.  
  18. body {}
  19.  
  20. p {
  21. color: #FFFFFF;
  22. text-align: left;
  23. }
  24.  
  25. .topmsg {
  26. font-size: 24px;
  27. margin-bottom: 0;
  28. }
  29.  
  30. .underline {
  31. color: #7AB55C;
  32. margin: 0 0 50px 0;
  33. }
  34.  
  35. .container_topmsg_underline_sub {
  36. width: 500px;
  37. padding: 1.0625em 1em;
  38. margin: 1% auto auto auto;
  39. }
  40.  
  41. .container_email_dropdown {
  42. width: 500px;
  43. display: inline-flex;
  44. position: relative;
  45. margin: 0 0 5px 0;
  46. }
  47.  
  48. #emailAddress {
  49. height: 22px;
  50. width: 65%;
  51. margin: 0 20px 0 0;
  52. padding: 1.0625em 1em;
  53. color: #7B7B7B;
  54. font-size: 16px;
  55. box-shadow: 0 0 0 1px #7B7B7B;
  56. border: 0;
  57. border-radius: 7px;
  58. background-color: #ffffff;
  59. }
  60.  
  61. #dropdown {
  62. margin: 0 5px 0 0;
  63. height: 56px;
  64. width: 35%;
  65. padding: 1.0625em 1em;
  66. color: #7B7B7B;
  67. font-size: 16px;
  68. box-shadow: 0 0 0 1px #7B7B7B;
  69. border: 0;
  70. border-radius: 7px;
  71. background-color: #ffffff;
  72. }
  73.  
  74. .signUpBtn {
  75. display: block;
  76. height: 56px;
  77. width: 500px;
  78. margin: 15px 0 0 0;
  79. padding: 1.0625em 1em;
  80. color: #FFFFFF;
  81. font-size: 16px;
  82. border: 0;
  83. border-radius: 5px;
  84. background-color: #5c6ac4;
  85. }
  86.  
  87. #unsubsribe {
  88. position: fixed;
  89.  
  90. width: 100%;
  91. bottom: 0;
  92. text-align: center;
  93. text-decoration: underline;
  94. color: #FFFFFF;
  95. }
  96.  
  97. #invalid_Email {
  98. display: flex;
  99. color: #000639;
  100. font-size: 16px;
  101. margin: 0 auto;
  102. width: 500px;
  103. font-family: Helvetica;
  104. }
  105.  
  106. select {
  107. background-color: #FFFFFF;
  108. }
  109. </style>
  110. </head>
  111.  
  112. <body>
  113.  
  114. <div class="body">
  115. <div class="container_top">
  116. <div class="container_topmsg_underline_sub">
  117.  
  118.  
  119.  
  120. <p class="topmsg"> Stay up to date with the ecommerce trends with Shopify's newsletter</p>
  121.  
  122.  
  123. <p class="underline">___</p>
  124.  
  125.  
  126. <p>Subscribe for free marketing tips</p>
  127.  
  128. </div>
  129. </div>
  130.  
  131. <form class="container_middle" method="POST" name="form">
  132.  
  133. <center>
  134. <div class="container_email_dropdown">
  135.  
  136.  
  137.  
  138. <input type="email" id="emailAddress" name="emailAddress" placeholder="Email Address" required>
  139.  
  140. <select name="interest" id="dropdown">
  141. <option id="dropdown" value="Interested in...">Interested in...</option>
  142. <option id="dropdown" value="1">1</option>
  143. <option id="dropdown" value="2">2</option>
  144. <option id="dropdown" value="3">3</option>
  145. <option id="dropdown" value="4">4</option>
  146. </select>
  147.  
  148. </div>
  149.  
  150. <p id="invalid_Email">Please enter a valid email address</p>
  151.  
  152. </center>
  153. <div class="signUpNow">
  154. <center>
  155. <input class="signUpBtn" type="button" onClick="verifyEmail();" value="Sign up now">
  156. </center>
  157.  
  158. </div>
  159. </form>
  160.  
  161.  
  162.  
  163.  
  164. <p id="unsubsribe">Unsubcribe</p>
  165.  
  166. </div>
  167.  
  168. <script id="jsbin-javascript">
  169. function verifyEmail() {
  170. var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
  171. if (document.form.emailAddress.value.search(emailRegEx) == -1) {
  172. document.getElementById("invalid_Email").style.color = '#C23628';
  173. } else {
  174. document.getElementById("invalid_Email").style.color = '#000639';
  175. insertValues();
  176. }
  177. }
  178.  
  179. function insertValues() {
  180. var email = document.form.emailAddress.value;
  181. var interest = document.form.interest.value;
  182. console.log(email + " is interested in: " + interest);
  183. }
  184. </script>
  185.  
  186. <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
  187. <html>
  188.  
  189. <head>
  190. <meta name="description" content="Shopify application challenge">
  191. <meta charset="utf-8">
  192. <meta name="viewport" content="width=device-width">
  193. <title>Shopify's challenge</title>
  194.  
  195. <link href="css.css" rel="stylesheet">
  196. <script src="js.js"><\/script>
  197. </head>
  198.  
  199. <body>
  200.  
  201. <div class="body">
  202. <div class="container_top">
  203. <div class="container_topmsg_underline_sub">
  204.  
  205.  
  206.  
  207. <p class="topmsg"> Stay up to date with the ecommerce trends with Shopify's newsletter</p>
  208.  
  209.  
  210. <p class="underline">___</p>
  211.  
  212.  
  213. <p>Subscribe for free marketing tips</p>
  214.  
  215. </div>
  216. </div>
  217.  
  218. <form class="container_middle" method="POST" name="form">
  219.  
  220. <center>
  221. <div class="container_email_dropdown">
  222.  
  223.  
  224.  
  225. <input type="email" id="emailAddress" name="emailAddress" placeholder="Email Address" required>
  226.  
  227. <select name="interest" id="dropdown">
  228. <option id="dropdown" value="Interested in...">Interested in...</option>
  229. <option id="dropdown" value="1">1</option>
  230. <option id="dropdown" value="2">2</option>
  231. <option id="dropdown" value="3">3</option>
  232. <option id="dropdown" value="4">4</option>
  233. </select>
  234.  
  235. </div>
  236.  
  237. <p id="invalid_Email">Please enter a valid email address</p>
  238.  
  239. </center>
  240. <div class="signUpNow">
  241. <center>
  242. <input class="signUpBtn" type="button" onClick="verifyEmail();" value="Sign up now">
  243. </center>
  244.  
  245. </div>
  246. </form>
  247.  
  248.  
  249.  
  250.  
  251. <p id="unsubsribe">Unsubcribe</p>
  252.  
  253. </div>
  254.  
  255. </body>
  256.  
  257. </html>
  258. </script>
  259.  
  260. <script id="jsbin-source-css" type="text/css">* {
  261. background-color: #000639;
  262. font-family: Helvetica, Arial, sans-serif;
  263. }
  264.  
  265. body {}
  266.  
  267. p {
  268. color: #FFFFFF;
  269. text-align: left;
  270. }
  271.  
  272. .topmsg {
  273. font-size: 24px;
  274. margin-bottom: 0;
  275. }
  276.  
  277. .underline {
  278. color: #7AB55C;
  279. margin: 0 0 50px 0;
  280. }
  281.  
  282. .container_topmsg_underline_sub {
  283. width: 500px;
  284. padding: 1.0625em 1em;
  285. margin: 1% auto auto auto;
  286. }
  287.  
  288. .container_email_dropdown {
  289. width: 500px;
  290. display: inline-flex;
  291. position: relative;
  292. margin: 0 0 5px 0;
  293. }
  294.  
  295. #emailAddress {
  296. height: 22px;
  297. width: 65%;
  298. margin: 0 20px 0 0;
  299. padding: 1.0625em 1em;
  300. color: #7B7B7B;
  301. font-size: 16px;
  302. box-shadow: 0 0 0 1px #7B7B7B;
  303. border: 0;
  304. border-radius: 7px;
  305. background-color: #ffffff;
  306. }
  307.  
  308. #dropdown {
  309. margin: 0 5px 0 0;
  310. height: 56px;
  311. width: 35%;
  312. padding: 1.0625em 1em;
  313. color: #7B7B7B;
  314. font-size: 16px;
  315. box-shadow: 0 0 0 1px #7B7B7B;
  316. border: 0;
  317. border-radius: 7px;
  318. background-color: #ffffff;
  319. }
  320.  
  321. .signUpBtn {
  322. display: block;
  323. height: 56px;
  324. width: 500px;
  325. margin: 15px 0 0 0;
  326. padding: 1.0625em 1em;
  327. color: #FFFFFF;
  328. font-size: 16px;
  329. border: 0;
  330. border-radius: 5px;
  331. background-color: #5c6ac4;
  332. }
  333.  
  334. #unsubsribe {
  335. position: fixed;
  336.  
  337. width: 100%;
  338. bottom: 0;
  339. text-align: center;
  340. text-decoration: underline;
  341. color: #FFFFFF;
  342. }
  343.  
  344. #invalid_Email {
  345. display: flex;
  346. color: #000639;
  347. font-size: 16px;
  348. margin: 0 auto;
  349. width: 500px;
  350. font-family: Helvetica;
  351. }
  352.  
  353. select {
  354. background-color: #FFFFFF;
  355. }
  356. </script>
  357.  
  358. <script id="jsbin-source-javascript" type="text/javascript">function verifyEmail() {
  359. var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
  360. if (document.form.emailAddress.value.search(emailRegEx) == -1) {
  361. document.getElementById("invalid_Email").style.color = '#C23628';
  362. } else {
  363. document.getElementById("invalid_Email").style.color = '#000639';
  364. insertValues();
  365. }
  366. }
  367.  
  368. function insertValues() {
  369. var email = document.form.emailAddress.value;
  370. var interest = document.form.interest.value;
  371. console.log(email + " is interested in: " + interest);
  372. }
  373. </script></body>
  374.  
  375. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!