Intro
Well, it’s time to build another blog transfer program but this time instead of changing code to code. I’m going to be transferring Word to code. This shouldn’t be too hard.
Set up
Okay I need to finish this pretty fast and it should honestly be pretty easy since I build something like this for the code-to-code transfer
HTML Webpage
<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<h1>Blog Formater</h1>
<label for=''>Title</label><br>
<textarea id='title-box' name='name' rows='2' cols='80'></textarea><br>
<label for=''>Date/Publisher</label><br>
<textarea id='date-pub' name='name' rows='2' cols='80'></textarea><br>
<label for=''>Keywords</label><br>
<textarea id='keys' name='name' rows='2' cols='80'></textarea><br>
<label for=''>Description</label><br>
<textarea id='des' name='name' rows='2' cols='80'></textarea><br>
<div class='final-blog'>
</div>
<br>
<button id='setction-button' type='button' name='button' >Section Header</button>
<button id='paragraph-button' type='button' name='button' >Blog Paragraph</button>
<button id='code-button' type='button' name='button' >code</button>
<button id='link-button' type='button' name='button' >Link</button>
<br>
<br>
<button id='finalize' type='button' name='button' >Finalize</button>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script type='text/javascript' src='../JS/blogFormat.js'></script>
</body>
</html>
Okay, I know that HTML is boring for this but I still like to show it. I built some textures and buttons to add in different parts of the blog post. but let's start looking at all the fun of javascript code
Javascript code
Button Setup
$('#setction-button').click(function(){
$('.final-blog').append(
`
<label for=''>Section Header</label><br>
<textarea id='box-`+ count +`' rows='2' cols='80'></textarea><br>
` )
count++;
blogArr.push('Section');
})
$('#paragraph-button').click(function(){
$('.final-blog').append(
`
<label for=''>Blog Paragraph</label><br>
<textarea id='box-`+ count +`' rows='8' cols='80'></textarea><br>
` )
count++;
blogArr.push('Blog');
})
$('#code-button').click(function(){
$('.final-blog').append(
`
<label for=''>Code Type</label><br>
<textarea id='code-type-`+ count +`' rows='2' cols='80'></textarea><br>
<label for=''>Code Title</label><br>
<textarea id='code-title-`+ count +`' rows='2' cols='80'></textarea><br>
<label for=''>Code Title</label><br>
<textarea id='box-`+ count +`' rows='8' cols='80'></textarea><br>
` )
count++;
blogArr.push('Code');
})
$('#link-button').click(function(){
$('.final-blog').append(
`
<label for=''>Link</label><br>
<textarea id='link-`+ count +`' rows='2' cols='80'></textarea><br>
<label for=''>Description</label><br>
<textarea id='des-`+ count +`' rows='2' cols='80'></textarea><br>
` )
count++;
blogArr.push('Link');
})
Alright, all four of these event handlers are pretty much the same all they do is press the button of the blog post section you want to add and then create a textarea and a label of all the parts of the sections. Super easy but necessary. The largest thing that happens in these event handlers is them pushing a string to an array to tell the computer in what order each section comes in.
HeadSetup function
function headSetUp(){
str = `
<!DOCTYPE html>
<html lang='en' dir='ltr'>
<x-blogcss
key='`+ $('#keys').val() +`'
des='`+ $('#des').val() +`'
title='`+ $('#title-box').val() +`'> @endComponentClass
<body>
<x-Nav > @endComponentClass
<header>
<h1 class='blog-title'>`+ $('#title-box').val() +`</h1>
<p class='title-caption'>`+ $('#date-pub').val() +`</p>
</header>
<main>
<section>
<picture class='blog-pic-container'>
<img class='blog-pic' src='' alt=''>
</picture>
</section>
</main>
<article class='blog-post'>
`
return str
}
The next function to talk about is the headset up. This is just going to create a long string and take the values from the keyword, description, title, and publisher textarea. This was pretty easy when just using some Jquery.
CreateBlog Function
function createBlog(arr){
let str = ''
let linkCount = 0;
let tempStr;
for (var i = 0; i < arr.length; i++) {
switch (arr[i]) {
case 'Section':
let sectionValue = $('#box-'+ i +'').val();
tempStr =
`
<x-blogsectionheader msg='`+ sectionValue +`'> @endComponentClass
`
str += tempStr
break;
case 'Blog':
let blogValue = $('#box-'+ i +'').val();
tempStr =
`
<x-blogparagraph msg='`+ blogValue +`'> @endComponentClass
`
str += tempStr
break;
case 'Code':
let codeType = $('#code-type-'+ i +'').val();
let codeTitle = $('#code-title-'+ i +'').val();
let codeStr = $('#box-'+ i +'').val();
tempStr =
`
<x-blogcodebox tag='`+ codeType +`' title='`+ codeTitle +`'
msg='`+ codeStr +`'
> @endComponentClass
`
str += tempStr
break;
case 'Link':
if (linkCount === 0) {
str +=
`
<br>
<div class='helpful-links-box'>
<h4 class='link-title'>Some Helpful links</h4>
<hr>
`
linkCount++;
}
let linkHref = $('#link-'+ i +'').val();
let linkDes = $('#des-'+ i +'').val();
tempStr =
`
<x-bloglink
link='`+ linkHref +`'
msg='`+ linkDes +`'> @endComponentClass
`
str += tempStr;
break;
default:
}
This function is where all the magic happens, it will be building the entire body of the blog post for me. This will need a string variable to hold the code, a link count to tell me if there are any links within the blog, and finally, a temporary string to hold sections of the code.
First I go into a for loop to identify all the different sections of the blog that have been stored in the blog. This could be a section, a blog paragraph, a code box, or even a link. It will read the array at that spot. Then it will go through a switch statement and add that type to the final string. Once everything has been added it will cap off the code with the ending html and arrow tags. Finally, when both the functions are done I send the final string to the console.
Now that is done I will be able to start working on adding in all the blogs that are sitting in my Word document that have to be uploaded
