Fixing bags

assets/css/style.css

@@ -94,6 +94,22 @@ body {
     width: 100%;
   }
 }
+.regex__input-wrapper {
+  position: relative;
+}
+.regex__input-leftelem,
+.regex__input-rightelem {
+  position: absolute;
+  font-size: 16px;
+  font-weight: 700;
+  top: calc(50% - 16px);
+}
+.regex__input-leftelem {
+  left: 10px;
+}
+.regex__input-rightelem {
+  right: 10px;
+}
 .regex__input {
   font-family: 'Courier Prime', monospace;
   background-color: #3F4B3B;
@@ -111,6 +127,9 @@ body {
 .regex__input:focus {
   background-color: #3d4e38;
 }
+.regex__input-wrapper .regex__input {
+  padding: 10px 22px;
+}
 textarea.regex__input {
   height: 400px;
   resize: none;
@@ -223,12 +242,17 @@ textarea.regex__input {
   padding: 20px;
   overflow-y: scroll;
 }
-.regex__result p {
+.regex__result .regex__result-name {
+  border: none;
+  padding: 0;
   margin: 0 0 10px 0;
+}
+.regex__result .regex__result-elem {
+  margin: 0 0 15px 0;
   padding: 10px 14px;
   border: 1px solid #AFBE8F;
 }
-.regex__result p.negative {
+.regex__result .regex__result-error {
   color: #F05F45;
   border: none;
   padding: 0;

assets/css/style.less

@@ -82,6 +82,22 @@ body {
 		width: 100%;
 	}
 }
+.regex__input-wrapper {
+	position: relative;
+}
+.regex__input-leftelem,
+.regex__input-rightelem {
+	position: absolute;
+	font-size: 16px;
+	font-weight: 700;
+	top: calc(50% - 16px);
+}
+.regex__input-leftelem {
+	left: 10px;
+}
+.regex__input-rightelem {
+	right: 10px;
+}
 .regex__input {
 	font-family: 'Courier Prime', monospace;
 	background-color: @primarycolor;
@@ -99,6 +115,9 @@ body {
         background-color: saturate(@primarycolor, 5%);
     }
 }
+.regex__input-wrapper .regex__input {
+	padding: 10px 22px;
+}
 textarea.regex__input {
 	height: 400px;
     resize: none;
@@ -208,12 +227,17 @@ textarea.regex__input {
 	border: 1px solid @secondarycolor;
 	padding: 20px;
 	overflow-y: scroll;
-	p {
+	.regex__result-name {
+		border: none;
+		padding: 0;
 		margin: 0 0 10px 0;
+	}
+	.regex__result-elem {
+		margin: 0 0 15px 0;
 		padding: 10px 14px;
 		border: 1px solid @secondarycolor;
 	}
-	p.negative {
+	.regex__result-error {
 		color: @negativecolor;
 		border: none;
 		padding: 0;

assets/js/script.js

@@ -32,19 +32,19 @@ document.addEventListener('DOMContentLoaded', function () {
 
 	btn.addEventListener('click', function () {
 		if ( str.value === '' || reg.value === '') {
-			result.innerHTML = '<p class="negative">Please, enter your data for test</p>'
+			result.innerHTML = '<p class="regex__result-error">Please, enter your data for test</p>'
 		}
 		else {
 			regExp = new RegExp(regValue, flags);
 			let strTemp = str.value.match(regExp) || [];
 			if ( strTemp.length > 0 ) {
 				result.innerHTML = '';
 				for (let i = 0; i < strTemp.length; i++) {
-					result.innerHTML += '<p><span>Match ' + (i + 1) + ': </span>' + strTemp[i] + '</p>'
+					result.innerHTML += '<p>Match ' + (i + 1) + ': </p><p class="regex__result-elem">' + strTemp[i] + '</p>'
 				}
 			}
 			else {
-				result.innerHTML = '<p class="negative">no matches</p>'
+				result.innerHTML = '<p class="regex__result-error">No matches</p>'
 			}
 		}
 	});

index.html

@@ -22,7 +22,11 @@
             <div class="regex">
                 <div class="regex__item">
                     <p class="regex__title">Regular expression to test:</p>
-                    <input class="regex__input" id="reg" type="text" value="">
+                    <div class="regex__input-wrapper">
+                        <div class="regex__input-leftelem">/</div>
+                        <input class="regex__input" id="reg" type="text" value="">
+                        <div class="regex__input-rightelem">/</div>
+                    </div>
                     <p class="regex__title">String to test:</p>
                     <textarea class="regex__input" id="str" type="text" value=""></textarea>
                     <p class="regex__title">Flags</p>