How to append to a specific place in a file in Ruby? - html
I am trying to create a webpage to be able to sell things online, and have come up with an issue while creating a file to automatically create a new item. I am trying to use Ruby to temporarily take off the end of the file, append the correct line to the file, and put the end back. My code so far is
puts "what is the item number?"
item_num = gets.chomp
puts "what is item description?(not optional)"
desc = gets.chomp
file_text = File.read("template.html")
file_text = file_text.gsub(/Item#/, "Item #{item_num.to_s}")
file_text = file_text.gsub(/<img class="item-image" src="">/, '<img class="item-image" src="' + item_num.to_s + '">')
file_text = file_text.gsub(/Item-desc/, desc)
puts file_text
file_create = File.new(item_num.to_s + ".html", "w")
file_create.puts(file_text)
file_create.close
item_page_end = '
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
'
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.gsub(item_page_end, "")
file_to_update = File.open("item_page.html", "a+")
file_to_update.puts( '<p class="col-md-4"><img src="../images/' + item_num + '.jpg" />Item' + item_num + '</p>')
file_to_update.puts(item_page_end)
sleep 10
The HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHS Metal | Store</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/logo-icon.png"/>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/owl.carousel.css" rel="stylesheet">
<link href="../css/owl.theme.default.min.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main element">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="title mt80">Store</h2>
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
What ends up happening is that the program inserts the HTML line I want to add to the "item_page.html" file to the end and then adding the "item_page_end" string at the end. Does anyone know how to fix it put the HTML line in the Ruby program after
<h2 class="title mt80">Store</h2>
Any other solution I have found is either for an array, a string or simply doesn't work.
If you can edit the HTML file, I see two possible answers:
(Please note that in all cases I use a function called add_all_elements which is a function that just returns whatever you want placed in your file.)
Cut your file in two, read the first half, add your elements and then read the second half. It should be something like this:
buffer = File.read("template_first_half.html")
buffer += add_all_elements()
buffer += File.read("template_second_half.html")
It is easy to use, but the HTML can be difficult to read.
You can also add a reference in the file and use gsub to replace it:
buffer = File.read("template.html")
buffer = buffer.gsub("#####anchor#####", add_all_elements())
Also easier to use, it will require that you place a unique sub-string within the file. The problem is that the reference must absolutely be unique within the file. The advantage is that the HTML file remains easy to read.
If you cannot edit the HTML file:
line_num = 0
buffer = ''
break_point = 42
text.each_line do |line|
if line_num == break_point
buffer += add_all_elements()
end
buffer += line
line_num += 1
end
Basically, you read the file line-by-line and place it into a buffer. When the line count reaches the required value (here, the variable break_point that I set at 42) you insert into the buffer all of the elements.
The inconvenient is that if the file is edited, the breaking point must be re-set each time. You could also use a string as a break point to avoid most of that problem.
You could do something like this:
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.sub(/(?<=<h2 class="title mt80">Store<\/h2>)/,file_text)
File.write("item_page.html",file_to_update)
With this there's no need to create a new file for file_text.
Basically whats happening is the second line here uses a lookbehind assertion to insert file_text into file_to_update after "Store</h2>". Then you just overwrite the contents of item_page.html with the updated string.
Related
how to force a line break inside a textarea?
I want to force a line break inside the textarea like this <textarea>hello!\nbye<br>hello again\r\n i'm here</textarea> but this way the page only shows like this: hello!\nbye<br>hello again\r\n i'm here and it should appear something like: bye hello again I'm here it's something like  ? which element should i use to make this line break?
A literal new line. <textarea>bye hello again I'm here</textarea>
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<textarea id="message">Hello</textarea>
<script type="text/javascript" charset="utf-8">
const message = document.getElementById('message');
message.value = 'bye' + '\r\n' + 'hello again' + '\r\n' + 'Im here';
console.log(message.value);
</script>
</body>
</html>
What HTML That Doesn't Show HTML Tags?
Few days ago, I visited a site, and for no reason I tried to view its source code. And surprisingly, it doesn't contain regular HTML tags such as h1, h2, p, etc.
it only contains code like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
if (window.PerformanceObserver) {
var observer = new PerformanceObserver(function(list) {
const entries = list.getEntries();
for (var i=0; i<entries.length; i++) {
var entry = entries[i];
// `name` will be either 'first-paint' or 'first-contentful-paint'.
var metricName = entry.name;
var time = Math.round(entry.startTime + entry.duration);
ga('send', {
hitType: 'timing',
timingCategory: 'Performance Metrics',
timingVar: metricName,
timingValue: time,
});
}
});
observer.observe({entryTypes: ['paint']});
}
</script>
<!-- Open search -->
<link type="application/opensearchdescription+xml" rel="search"
href="./assets/opensearch-id.xml"/>
<script>dataLayer = [];</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WJZQSJF');</script>
<!-- End Google Tag Manager -->
<link href="***/assets/bundle.f4eb17af99f6bcda6c58794466a0abd3.css" rel="stylesheet"></head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJZQSJF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="main"></div>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
</script>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
<!-- Criteo One Tag Code -->
<script type="text/javascript" src="//*******" async="true"></script>
<script>window.criteo_q = window.criteo_q || [];</script>
<!-- End Criteo Code -->
<script>!function(e){function c(a){if(b[a])return b[a].exports;var d=b[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var a=window.webpackJsonp;window.webpackJsonp=function(b,f,n){for(var r,t,o,i=0,u=[];i<b.length;i++)t=b[i],d[t]&&u.push(d[t][0]),d[t]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(a&&a(b,f,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=c(c.s=n[i]);return o};var b={},d={74:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var b=d[e];if(0===b)return new Promise(function(e){e()});if(b)return b[2];var f=new Promise(function(c,a){b=d[e]=[c,a]});b[2]=f;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+""+({61:"vendor",62:"bundle",63:"icons",64:"short_url"}[e]||e)+".bundle."+{0:"c38a1529c3b99c325cbb",1:"36418a346d47b7489609",2:"ef74eff3789cd571abc8",3:"40b845bf76f300f55de4",4:"8a6a439aa451d3d927b0",5:"72986b428e8cbd866607",6:"c6c9571f8e2fe5d212bb",7:"aae34ad175b103ef7e4e",8:"242c59a9d553de716c60",9:"ef6bbc1570fb8834ab36",10:"4bbc0a828f9c224773d1",11:"ddb3f50d8864e9408fc1",12:"6c1497f53303248323d7",13:"afeda231b24bbc8194de",14:"a87b72a437d706639baf",15:"09604bb7d99977b19574",16:"2a88b519fe8a5231bed8",17:"8752912c6b561ea445e5",18:"1bc4d82776cf99767789",19:"a2333c0fb5928e5c8294",20:"5b3a12ea7ea8144d0b40",21:"84073184bb3f2047b2a7",22:"20b45cf24e9ba43bfeb9",23:"cd0ea9678da108d1f4ce",24:"cd3c35192890404fa9f8",25:"5eb5420abef187dc2df6",26:"18f747b4b8c098ff19f7",27:"669314a53c5cfe3c73d6",28:"ebcb097c69b716623654",29:"ac9eccdcdb242cc2aef8",30:"5e109d633d36dcbba47f",31:"5a7027b9dfa01f78bf70",32:"61e7dceb5b3a30078d83",33:"4fee29baa1d2816fdae7",34:"cc8761150451212c4a22",35:"b17ad377b0cb1ef37461",36:"66899702ab02bf7a6339",37:"bf88a5c916c22b7dd322",38:"0f8294f2a9a2e2e1ffeb",39:"dc558711f648a8ae4fc6",40:"aa5362b270c5e5c12cb8",41:"53574e3109dc0721b45b",42:"e7d39f00425207d8b5b0",43:"b1cdc408800853db7b1a",44:"90e7fdfc599c75ed6c00",45:"33db36c7330b10227972",46:"830b163b775b656e3a92",47:"03bfb3bbdd79ee0e0442",48:"e0548b8051ef72fb0e4f",49:"a14357c795d7bc1913cd",50:"ed0bec3efe20b2dc2da1",51:"76f7f508111c9d32ea1e",52:"ce6f96656a3b08a5f978",53:"dbce6a5f7c10fc5bda8b",54:"00e18ead99250bf63f01",55:"04d3bb1b65d42a9fdaf4",56:"1a12a992adc0cc13f856",57:"5fe4d3c577315f8f99a2",58:"bcd10412dcbab2259da4",59:"c8db0c00ea4034701abc",60:"d33e9ca4f6d41e01d92c",61:"8ee65c855117c2ea0d78",62:"7d31cc04d88c6681ce75",63:"d2dcedabc8faa5a71473",64:"e66827895350ae2fac63",65:"230b7a8a1670edc8e52c",66:"33b35d4cbdffc7271758",67:"6a55b5d11720b6d975ad",68:"7d28f6e0272beec18917",69:"91c610b55fa27ae0d91c",70:"4c240b9a04ec67a27235",71:"54531e628f75037462bd",72:"f6a6e9ff0ab728eabca1",73:"3d7f47216be8efeca29b"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),f},c.m=e,c.c=b,c.d=function(e,a,b){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:b})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="https://cdngarenanow-a.akamaihd.net/shopee/shopee-pcmall-live-id/assets/",c.oe=function(e){throw e}}([]);
</script>
<script type="text/javascript" src="https://***/vendor.8ee65c855117c2ea0d78.js"></script><script type="text/javascript" src="https://***/assets/icons.d2dcedabc8faa5a71473.js"></script><script type="text/javascript" src="https://***/assets/bundle.7d31cc04d88c6681ce75.js"></script><script type="text/javascript" src="https://***/assets/short_url.e66827895350ae2fac63.js"></script></body>
</html>
what programming language / technique is this? it shows all the content on my browser, but the html tags remains invisible. any idea what it is?
That's some straight up Javascript you're seeing there, and the code running will be generating all the necessary tags client side (hence why viewing the source doesn't show them). Try right-clicking on an element and using "Inspect". That should open the browser's dev tools and show the HTML code the Javascript is generating.
What is the error in the link tag!! .. CSS is not getting linked.. am a beginner...
Am trying to use "well", but i couldn't get it.i guess the probelm is in linking part, even i couldn't use any other features of CSS, am a beginner and couldn't get through this. Thanks in advance to anyone who helps in with this.. <!DOCTYPE html> <html> <head> <title>Jothidhal</title> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width , initial-scale = 1> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css> </head> <body> <div class = "container"> <div class = "row"> <div class = "col-md-12 well" >col-12</div>//Am trying to use "well", but i couldn't get it.i guess the probelm is in linking part, even i couldn't use any other features of CSS, am a beginner and couldn't get through this. Thanks in advance to anyone who helps in with this.. </div> </div> <script type = "text/javascript" src = "js/bootstrap.min.js"></script> <script type = "text/javascript" src = "js/jquery.js"></script> </body> </html>
You're missing closing " <meta name = "viewport" content = "width = device-width , initial-scale = 1"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
If you are beginner and feeling linking problem of css and js file, just include the cdn files of bootstrap in your html file and write your code. I have included the cdn file in below code, look into this. <!DOCTYPE html>`` <html> <head> <title>Jothidhal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class = "container"> <div class = "row"> <div class = "col-md-12 well" >col-12</div>//Am trying to use "well", but i couldn't get it.i guess the probelm is in linking part, even i couldn't use any other features of CSS, am a beginner and couldn't get through this. Thanks in advance to anyone who helps in with this.. </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
include multiple parts using ngInclude
I am making a WebApp with angularJS and I have something that irritates me. <!doctype html> <html> <head> <title>webapp</title> <link href="css/angular-bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="js/angular-bootstrap.js" type="text/javascript"></script> <script src="js/app.js"></script> </head> <body ng-app="app"> <div class="container"> <h1>WebApp</h1> <div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper"> <div ng-include="'blocks/item.html'"></div> <div ng-include="'blocks/something.html'"></div> <div ng-include="'blocks/health.html'"></div> <div ng-include="'blocks/mana.html'"></div> <div ng-include="'blocks/running.html'"></div> <div ng-include="'blocks/out.html'"></div> <div ng-include="'blocks/of.html'"></div> <div ng-include="'blocks/ideas.html'"></div> </div> </div> </body> </html> Every item, i have to write another include. is there a way to include these and any additions in the future with one command?
Firstly, in your controller create the alphabet array (as shown here)
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
}
$scope.charArray = genCharArray('a', 'z'); // ["a", ..., "z"]
Then, in your template:
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-repeat="letter in charArray" ng-include="'blocks/' + letter + '.html'"></div>
</div>
[edit]
If you want to work with any generic list and not specifically the alphabet as in the original post, just use an array and initialize it with whatever.
$scope.charArray = ['lemon', 'tree', 'apple'];
The point here is using ng-repeat to iterate over any number of objects you like, and dynamically create the ng-include elements appropriately.
html source code from Arduino
I am making a home appliance control device using arduino. I got this html code from the website. What is the code to get the value from the Arduino?
I think
$("#temperatureDisplay").load('temperature_display.php');
This part would be a receiving the value from the Arduino, but I am confusing. If I know what is code for receiving the value, how can I use if statement to change the background color with different value of output from Arduino?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Station</title>
</head>
<body>
<div class="data">
<div class="dataTitle">Temperature: </div>
<div id="temperatureDisplay">Waiting for data ...</div>
</div>
<script type="text/javascript">
setInterval(function()
{
$("#temperatureDisplay").load('temperature_display.php');
}, 1000);
</script>
</body>
</html>
This is php file and the data file is just number. This number is always changed with the Arduino.
<?php
$myFile = "temp_data.txt";
$fh = fopen($myFile, 'r');
$line = fgets($fh);
fclose($fh);
echo $line;
?>